<template>
	<view class="home">
		<!-- 自定义组件 -->
		<navbar></navbar>
		<tab :list="labels" @tab="tab" :tabIndex="tabFun"></tab>
		<view class="home-list">
			<!-- 为什么上一层要加一个view，是因为不加的话就无法滚动 -->
			<list :tab="labels" :activeList="activeListValue" @mchange="mmmchange"></list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labels: [],
				tabFun:0,
				activeListValue:0,
			}
		},
		onLoad() {
			this.getlabl();
			// this.testPost()
		},
		methods: {
			mmmchange(current){
				this.tabFun=current.current
			},
			//这个方法是信息的接收，就是从tab组件中接收信息
			tab({data,index}) {
				this.activeListValue= index
			},
			getlabl() {
				uni.request({
					url: 'http://localhost:8000/api/labels', //仅为示例，并非真实接口地址。
					success: (res) => {
						//res.data，这里面的data是调用里面数据固定的搭配。后面的data表示要调用的字段
						this.labels = res.data.data;
					},
				})
			},
			// testPost() {
				// uni.request({
				// 	url: 'http://localhost:8000/api/testpost', //仅为示例，并非真实接口地址。
				// 	method:'POST',
				// 	data:{
						// class_id:this.activeListValue,
			// 		},
			// 		success: (res) => {
			// 			//res.data，这里面的data是调用里面数据固定的搭配。后面的data表示要调用的字段
			// 			this.labels = res.data.data;
			// 		},
			// 	})
			// },

		},
	}
</script>




<style lang="scss">
	page {
		height: 100%;
		display: flex;
	}

	.home {
		display: flex;
		//让它垂直的进行排列
		flex-direction: column;
		//这个是干嘛的
		flex: 1;
		border: 1rpx red solid;
		//溢出隐藏
		// overflow: hidden;
		.home-list{
			//专门的flex又是什么意思啊，不加这个的话内容不显示
			flex: 1px;
			box-sizing: border-box;
			//下面这个大概知道了，第一就是给他加一个边框,还有的一个用处就是看内容有没有撑开
			//想看自己的这个class的区域范围有多大
		}
	}
</style>